Resolves #5242 and supersedes #5894.

Context

On the Vue/Vite side, the icons Nuxt UI uses were never bundled, so @iconify/vue fetched them from the Iconify API at runtime. That broke offline use, caused the SSR "icon appears after hydration" flash, and added network round-trips. This is the Vue equivalent of what #6633 wires up for Nuxt through @nuxt/icon's client bundle.

What this does

A new @nuxt/ui/vite sub-plugin (src/plugins/icons.ts) loads the SVG data at build time with @iconify/utils and emits a virtual:nuxt-ui-icons module that registers the inlined data through @iconify/vue's addIcon. The vue-plugin install runs it on both server and client, so the icons render synchronously during SSR and fully offline, while keeping the i-lucide-* string syntax.

It reuses the src/utils/icons.ts helpers from #6633 and applies the nuxt/icon#502 lesson by resolving collections from the Vite config.root rather than process.cwd(), so workspace and monorepo builds work too.

Options

Bundling is on by default for Nuxt UI's own icons. You can extend or disable it:

import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    ui({
      icon: {
        clientBundle: {
          icons: ['lucide:heart', 'simple-icons:github']
        }
        // or set `clientBundle: false` to opt out entirely
      }
    })
  ]
})

Following the same decision as #6633, this does not add @iconify-json/lucide as a hard dependency. Icons are bundled only when their collection is installed, and otherwise fall back to runtime loading. The SSR docs have been updated to explain this.

How to test

1. Install a collection in your Vue app, for example @iconify-json/lucide.
2. Build or SSR-render a page that uses a Nuxt UI component with an icon. The icon shows up in the server-rendered HTML with no request to api.iconify.design.

In this repo, pnpm dev:vue:build bundles all 42 default lucide icons into the output with their SVG bodies inlined.

Notes

• Stacked on feat/pre-bundle-icons (feat: pre-bundle used icons into @nuxt/icon client bundle #6633) so the diff shows only the Vue side. GitHub will retarget the base to v4 once feat: pre-bundle used icons into @nuxt/icon client bundle #6633 merges.
• Co-authored with @typed-sigterm, whose vite-plugin-iconify-bundle inspired the approach.
• Thanks @y-l-g for docs(integrations): clarify icons SSR usage in Vue #5894, which surfaced the problem.